<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/bootstrap/bootstrap.css">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="css/bootstrap/bootstrap-theme.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>

    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav .nav-content {
            width: 750px;
            margin: 0 auto;
        }
        .nav .nav-content .nav-item .logo-content img{
            width: 222px;
            height: 114px;
            position: absolute;
            left: -106px;
            top: -12px;
        }
        .nav .nav-content .nav-item .logo-content{
            width: 100px;
            height: 85px;
            overflow: hidden;
            position: relative;
        }
        @font-face{
            font-family: QS-R;
            src:url(./font/Quicksand-Regular.ttf);
        }

        @font-face{
            font-family: QS-M;
            src:url(./font/Quicksand-Medium.ttf);
        }

        @font-face{
            font-family: QS-L;
            src:url(./font/Quicksand-Light.ttf);
        }

        @font-face{
            font-family: QS-B;
            src:url(./font/Quicksand-Bold.ttf);
        }

        @font-face{
            font-family: QS-SB;
            src:url(./font/Quicksand-SemiBold.ttf);
        }

        .nav .nav-content .nav-list {
            width: 750px;
            height: 85px;
            display: flex;
            align-items:center;
            justify-content :space-between;
            /* background-color: #F5F5F5; */

        }

        .nav .nav-content .nav-item {
            font-family: QS-M;
            font-size: 24px;
            /* float: left; */

        }

        .nav .nav-content .nav-item:hover {
            cursor: pointer;
            color: blue;
        }

        .choseed-btn {
            color: blue;
        }

    </style>
    <style>
        .info-content {
            width:750px;
            height:545px;
            margin:0 auto;
            background-color: #e3e4e5;
            position:relative;
        }

        .info-content .right-content {
            margin-top: 20px;
            float:left;
            width:500px;
            background-color: white;
            height:440px;
            border-radius: 12px;
        }

        .info-content .left-content {
            float:left;
            width:200px;
        }

        .info-content .left-content .img-content {
            background-color:red;
            width:120px;
            height:120px;
            border-radius:8px;
            margin: 37px auto;

        }
        .info-content .left-content .img-content #avatar{
            width:120px;
            height:120px;
            border-radius:8px;
        }

        .info-content .left-content .class-btn {
            background-color:white;
            width:120px;
            height:40px;
            border-radius:8px;
            margin: 37px auto;
            text-align:center;
            line-height: 40px;
            font-family: QS-SB;
            font-weight: bold;
            color:#0066FF;
        }

        .info-content .left-content .change-btn {
            background-color:white;
            width:120px;
            height:40px;
            border-radius:8px;
            margin: 37px auto;
            text-align:center;
            line-height: 40px;
            font-family: QS-SB;
            font-weight: bold;
            color:#0066FF;
            font-size: 12px;
        }
        .user-info {
            width:120px;
            margin: 0 auto;
            background-color:white;
            border-radius:8px;
            overflow:hidden
        }
        .user-info h3 {
            font-family: QS-B;
            text-align: center;
            margin: 5px 0;
            font-size:20px;
        }
        .user-info p {
            font-family: QS-SB;
            font-size: 12px;
            margin-left: 5px;
        }
        .info-content .left-content div {
            margin: 37px auto;
        }

        .info-content .right-content .right-input-style {
            width:70%;
            border: 1px #ccc;
            display: inline-block;
            font-family: QS-B;
            font-size:17px;
        }
        .info-content .right-content .detail-info-content {
            font-family: QS-B;
            font-size:17px;
            margin-left: 15px;
        }
        .info-content .right-content h3 {
            font-family: QS-B;
            text-align: center;
            margin: 5px 0;
        }
        .info-content .right-content span {
            width:100px;
            display:inline-block;
        }

        .info-content .right-content .content-item {
            margin:15px 0;
        }
        .info-content .button-content {
            width:660px;
            border-radius:8px;
            height:50px;
            margin:15px auto;
            background-color:white;
            line-height: 50px;
            display:flex;
            justify-content: space-between;
        }
        .info-content .button-content .contact-btn {
            font-family: QS-SB;
            font-weight: bold;
            color:#0066FF;
            font-size: 14px;
        }
        .info-content .button-content .text-info {
            font-family: QS-B;
            font-size: 14px;
            color:black;
        }


        .info-content .left-content .class-btn:hover{
            color: red;
            cursor: pointer;
        }

        .info-content .left-content .change-btn:hover{
            color: red;
            cursor: pointer;
        }


    </style>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            font-size: 0;
            clear: both;
            visibility: hidden;

        }
        .nav-item span>a{
            color: black;
        }
        .loading-bar {
            width:150px;
            height:110px;
            border-radius:8px;
            background-color:#707070;
            opacity:0.8;
            /*background-color:black;*/
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin: auto;
            text-align: center;
        }

        @keyframes loading{
            0% {
                transform:rotate(0deg)
            }
            100%{
                transform:rotate(360deg)
            }
        }
        .loading-icon {
            animation:loading linear 1s infinite;
        }
    </style>

    <style>
        .text{
            margin-top:20px;
            padding-left:20px;
            font-family: QS-R;
        }
        .input{
            width: 380px;
            height: 60px;
            margin: 20px auto;
            font-family:QS-M;
            font-size: 25px;
            color: black;
            background-color:rgba(157,157,157,.15);
            background-position: 15px;
            background-repeat: no-repeat;
            background-size: 35px 35px;
            border:none;
            border-radius: 8px;
        }
        .text::-webkit-input-placeholder{
            padding-left:50px;
            font-family: QS-R;
        }
        .change-psw-bar{
            z-index: 998;
            width:445px;
            height: 200px;
            text-align: center;
            background-color: white;
            box-shadow: 10px 10px 5px #888888;
            border-radius: 8px;
            top: 100px;
            left: 23px;
        }
        .button {
            width:126px;
            height:30px;
            color:white;
            background-color:#004aad;
            border:none;
            border-radius:8px;
            font-family:QS-M;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-content">
            <ul class="nav-list">
                <li class="nav-item">
                    <div class="logo-content">
                        <img src="image/LOGO.png" alt="">
                    </div>
                </li>
                <li class="nav-item">
                    <span class=""><a href="/courseBordTeacher">Course board</a></span>
                </li>
                <li class="nav-item">
                    <span class=""><a href="/timetable">Timetable</a></span>
                </li>
                <li class="nav-item">
                    <span class=""><a href="/grade">Grades</a></span>
                </li>
                <li class="nav-item">
                    <span class=""><a href="/drive">Drive</a></span></li>
                <li class="nav-item" style="    margin-top: 10px;">
                    <svg t="1639982246046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8917" width="48" height="48"><path d="M619.064182 504.57971c91.163561-42.401656 154.766046-133.565217 154.766046-239.569358C773.830228 118.724638 655.10559 0 508.819876 0S243.809524 118.724638 243.809524 265.010352c0 106.004141 63.602484 197.167702 154.766045 239.569358C169.606625 555.461698 0 758.989648 0 1002.799172v21.200828h1017.639752v-21.200828c0-243.809524-169.606625-447.337474-398.57557-498.219462z" p-id="8918" fill="#1296db"></path></svg>
                </li>
            </ul>
        </div>
    </div>
    <div class="info-content" th:object="${session.currentLoginUser}">
        <div class="top-contnet clearfix">
            <div class="left-content">
                <div class="img-content">
                    <img src="image/testAver.jpg" alt="avatar" id="avatar">
                </div>
                <div class="class-btn"><a href="/course/joinCourse">Join a class</a></div>
                <div class="user-info">
                    <h3>MyAccount</h3>
                    <p th:text="*{username}">Username:Jessi610</p>
                    <p style="margin-bottom: 10px;">Password:***********</p>
                </div>
                <div class="change-btn" onclick="changePSW()"><p>Change Password</p></div>
            </div>
            <script>
                function changePSW() {
                    $(".change-psw-bar").show()
                }
                function cloeseBar() {
                    $(".change-psw-bar").hide()

                    $.ajax({
                        url:"/changePSW",
                        dataType: "JSON",
                        method: "POST",
                        data:{
                            password:hex_md5(document.getElementById("password").value)
                        },
                        success:function (data) {
                            if (data.code===true){
                                alert("success!")
                            }
                        }

                    })
                }
            </script>
            <div style="position: relative"  class="right-content">
                <div style="position: absolute;display: none" class="change-psw-bar">
                    <input type="password" id="password" name="password" class="input text" placeholder="Set your password">
                    <input onclick="cloeseBar()" type="button" id="select-uni-next" class="button next" Value="submit">
                </div>

                <div class="detail-info-content">
                    <h3>MyProfile</h3>
                    <div class="name-content content-item">
                        <input type="hidden" id="userId" name="userId" th:value="*{userId}">
                        <span>Name：</span>
                        <input type="text" class="form-control right-input-style" id="name" th:value="|*{fName} *{lName}|">
                    </div>
                    <div class="metricNo content-item">
                        <span>MetricNo：</span>
                        <input type="text" class="form-control right-input-style" id="metricNo" th:value="*{userInfo.metricNo}" disabled>
                    </div>
                    <div class="email-content content-item">
                        <span>Email：</span>
                        <input type="text" class="form-control right-input-style" id="email" th:value="*{email}">
                    </div>
                    <div class="telephone-content content-item">
                        <span>Telephone：</span>
                        <input type="text" class="form-control right-input-style" id="telephone" th:value="*{telNo}">
                    </div>
                    <div class="role-content content-item">
                        <span>Role：</span>
                        <input type="text" class="form-control right-input-style" id="role" value="Learner" disabled>
                    </div>
                    <div class="level-content content-item">
                        <span>Level：</span>
                        <input type="text" class="form-control right-input-style" id="level" th:value="*{userInfo.diploma}">
                    </div>
                    <div class="major-content content-item">
                        <span>Major：</span>
                        <input type="text" class="form-control right-input-style" id="major" th:value="*{userInfo.major}">
                    </div>
                    <div class="university-content content-item">
                        <span>University：</span>
                        <input type="text" class="form-control right-input-style" id="university" th:value="*{university.uniName}" disabled>
                    </div>
                </div>
            </div>
        </div>
        <div class="button-content">
            <span class="contact-btn" style="margin-left:15px;">Contact Us:</span>
            <span class="text-info">Email:HappyStudy@gmail.com</span>
            <span class="text-info" style="margin-right: 30px;">Tele:1234567890</span>
        </div>
        <div class="loading-bar" id="loading-bar" style="display:none;">
            <p>
                <svg t="1642230754233" class="loading-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8715" id="mx_n_1642230754236" data-spm-anchor-id="a313x.7781069.0.i39" width="64" height="64"><path d="M512 337.322667a26.666667 26.666667 0 0 1-26.666667-26.666667V197.333333a26.666667 26.666667 0 1 1 53.333334 0v113.322667c0 14.762667-11.946667 26.666667-26.666667 26.666667z" fill="#707070" p-id="8716" data-spm-anchor-id="a313x.7781069.0.i49" class="selected"></path><path d="M424.661333 360.746667a26.666667 26.666667 0 0 1-36.394666-9.728l-56.661334-98.133334a26.666667 26.666667 0 0 1 46.122667-26.666666l56.661333 98.133333a26.624 26.624 0 0 1-9.728 36.394667z" fill="#707070" opacity=".9" p-id="8717" data-spm-anchor-id="a313x.7781069.0.i48" class="selected"></path><path d="M360.746667 424.661333a26.624 26.624 0 0 1-36.394667 9.728l-98.133333-56.661333a26.624 26.624 0 1 1 26.666666-46.122667l98.133334 56.661334c12.714667 7.338667 17.066667 23.68 9.728 36.394666z" fill="#707070" opacity=".85" p-id="8718" data-spm-anchor-id="a313x.7781069.0.i47" class=""></path><path d="M337.322667 512c0 14.72-11.946667 26.666667-26.666667 26.666667H197.333333a26.666667 26.666667 0 1 1 0-53.333334h113.322667c14.762667 0 26.666667 11.946667 26.666667 26.666667z" fill="#707070" opacity=".8" p-id="8719" data-spm-anchor-id="a313x.7781069.0.i46" class=""></path><path d="M360.746667 599.338667a26.666667 26.666667 0 0 1-9.728 36.394666l-98.133334 56.661334a26.666667 26.666667 0 0 1-26.666666-46.122667l98.133333-56.661333a26.624 26.624 0 0 1 36.394667 9.728z" fill="#8a8a8a" opacity=".75" p-id="8720" data-spm-anchor-id="a313x.7781069.0.i45" class=""></path><path d="M424.661333 663.253333a26.624 26.624 0 0 1 9.728 36.394667l-56.661333 98.133333a26.624 26.624 0 1 1-46.122667-26.666666l56.661334-98.133334a26.666667 26.666667 0 0 1 36.394666-9.728z" fill="#8a8a8a" opacity=".7" p-id="8721" data-spm-anchor-id="a313x.7781069.0.i44" class=""></path><path d="M512 686.677333c14.72 0 26.666667 11.946667 26.666667 26.666667v113.322667a26.666667 26.666667 0 1 1-53.333334 0v-113.322667c0-14.762667 11.946667-26.666667 26.666667-26.666667z" fill="#8a8a8a" opacity=".65" p-id="8722" data-spm-anchor-id="a313x.7781069.0.i43" class=""></path><path d="M599.338667 663.253333a26.666667 26.666667 0 0 1 36.394666 9.728l56.661334 98.133334a26.666667 26.666667 0 0 1-46.122667 26.666666l-56.661333-98.133333a26.624 26.624 0 0 1 9.728-36.394667z" fill="#8a8a8a" opacity=".6" p-id="8723" data-spm-anchor-id="a313x.7781069.0.i42" class=""></path><path d="M663.253333 599.338667a26.624 26.624 0 0 1 36.394667-9.728l98.133333 56.661333a26.624 26.624 0 1 1-26.666666 46.122667l-98.133334-56.661334a26.666667 26.666667 0 0 1-9.728-36.394666z" fill="#cdcdcd" opacity=".55" p-id="8724" data-spm-anchor-id="a313x.7781069.0.i41" class=""></path><path d="M686.677333 512c0-14.72 11.946667-26.666667 26.666667-26.666667h113.322667a26.666667 26.666667 0 1 1 0 53.333334h-113.322667a26.666667 26.666667 0 0 1-26.666667-26.666667z" fill="#cdcdcd" opacity=".5" p-id="8725" data-spm-anchor-id="a313x.7781069.0.i40" class=""></path><path d="M663.253333 424.661333a26.666667 26.666667 0 0 1 9.728-36.394666l98.133334-56.661334a26.666667 26.666667 0 0 1 26.666666 46.122667l-98.133333 56.661333a26.624 26.624 0 0 1-36.394667-9.728z" fill="#ffffff" opacity=".4" p-id="8726" data-spm-anchor-id="a313x.7781069.0.i38" class=""></path><path d="M599.338667 360.746667a26.624 26.624 0 0 1-9.728-36.394667l56.661333-98.133333a26.624 26.624 0 1 1 46.122667 26.666666l-56.661334 98.133334a26.666667 26.666667 0 0 1-36.394666 9.728z" fill="#ffffff" opacity=".3" p-id="8727" data-spm-anchor-id="a313x.7781069.0.i36" class=""></path></svg>
            </p>
            <p>
                <span style="color:white;font-size:14px">保存中,请稍后</span>
            </p>

        </div>
    </div>
</body>
<script>
    $(".detail-info-content .form-control").blur(function (event) {
        let currentElement = event.currentTarget;
        console.log(currentElement.id,currentElement.value)
        if (currentElement.value!==""){
            document.getElementById("loading-bar").style.display="block"
            $.ajax({
                url:"/accountInfo/updateInfo",
                dataType:"JSON",
                method:"PUT",
                data:{
                    key:currentElement.id,
                    value:currentElement.value,
                    role:document.getElementById("role").value,
                    userId:document.getElementById("userId").value
                },
                success:function (data) {
                    console.log(data)
                    document.getElementById("loading-bar").style.display="none"
                }

            })
        }

    })
</script>
</html>